<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <title>UNIS Design System v4</title>
    <meta name="author" content="">
    <meta name="generator" content="">
    <link rel="stylesheet" href="../../../../css/bootstrap.css">
    <link rel="stylesheet" href="../../../../styles/global.css">
    <link rel="stylesheet" href="../../../../css/unis.css">
    <link rel="stylesheet" href="../../../parcel-project/parcel-project.css">
    <link href="../styles/monokai_sublime.min.css" rel="stylesheet">
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>

<div class="container-fluid" id="app">

  <div class="unis-header">
    <div class="nav">
    </div>
    <div class="user accents-bg">js
        <div class="drop-box">
            <ul>
                <li>
                    <div class="head"></div>Jessica Chen</li>
                <li>
                    <button>My Profile</button>
                </li>
                <li>
                    <button>Technical Support</button>
                </li>
                <li>
                    <button>Settings</button>
                </li>
                <li>
                    <button>Log Out</button>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="page-title">Create Shipment</div>
<div class="unis-section" style="position:relative">
    <div class="position-re">
        <div class="modification">
            <div class="content">
                <div class="d-flex flex-row-reverse">
                    <div class="p-4 bo-no">
                        <label>Reference #</label>
                        <input class="unis-put" placeholder="">
                    </div>
                    <div class="p-4 bo-no">
                        <label>Date</label>
                        <button class="unis-functional-box">
                            <span>Today</span>
                            <i class="unis-date unis-icon"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="unis-section" style="position:relative">
    <div class="position-re">
        <div class="modification">
            <div class="header">
                <div class="title">Ship From</div>
            </div>
            <div class="content">
                <div class="d-flex justify-content-between">
                    <div class="align-self-start col-6 bo-no">
                        <label>Choose Your Address</label>
                        <button class="unis-select">
                            <input type="button" value="Office Address">
                        </button>
                    </div>
                    <div class="align-self-end col-5 bo-no">
                        <label>Return Address</label>
                        <button class="unis-select">
                            <input type="button" value="Same as Ship Address">
                        </button>
                    </div>
                </div>
                <div class="dropdown">
                    <div class="unis-checkbox">
                        <input type="checkbox" name="1" id="ch1">
                        <label class="unis-checkbox-style" for="ch1"></label>
                        <span>Include Return Label</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="unis-section" style="position:relative">
    <div class="position-re">
        <div class="modification">
            <div class="header">
                <div class="d-flex">
                    <div class="p-2 bo-no">
                        <div class="title">Ship To</div>
                    </div>
                    <div class="ml-auto p-2 bo-no">
                        <div class="required-text">*Required Field</div>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="dropdown">
                    <label>Country or Territory</label>
                    <button class="unis-select">
                        <input type="button" value="Select">
                    </button>
                </div>
                <div class="d-flex justify-content-between">
                    <div class="align-self-start col-6 bo-no">
                        <label>Name</label>
                        <input class="unis-put" value="Full Name">
                    </div>
                    <div class="align-self-start col-5 bo-no">
                        <label>Company Name</label>
                        <input class="unis-put" value="Company Name">
                    </div>
                </div>
                <div class="d-flex justify-content-between">
                    <div class="align-self-start col-6 bo-no">
                        <label>Address*</label>
                        <input class="unis-put" value="Street Address">
                    </div>
                    <div class="align-self-start col-5 bo-no">
                        <label>Apartment, suite, unit, building, floor</label>
                        <input class="unis-put" value="Apt #">
                    </div>
                </div>
                <div class="d-flex justify-content-between">
                    <div class="align-self-start col-4 bo-no">
                        <label>Zip Code</label>
                        <input class="unis-put" value="Zip Code">
                    </div>
                    <div class="align-self-end col-4 bo-no">
                        <label>City</label>
                        <button class="unis-select">
                            <input type="button" value="Select">
                        </button>
                    </div>
                    <div class="align-self-center col-3 bo-no">
                        <label>State</label>
                        <button class="unis-select">
                            <input type="button" value="Select">
                        </button>
                    </div>
                </div>
                <div class="d-flex justify-content-between">
                    <div class="align-self-start col-5 bo-no">
                        <label>Email*</label>
                        <input class="unis-put" value="Email Address">
                    </div>
                    <div class="align-self-end col-4 bo-no">
                        <label>Phone*</label>
                        <input class="unis-put" value="Phone Number">
                    </div>
                    <div class="align-self-center col-2 bo-no">
                        <label>Ext*</label>
                        <input class="unis-put" value="Phone Ext.">
                    </div>
                </div>
                <div class="dropdown">
                    <div class="unis-checkbox">
                        <input type="checkbox" name="1" id="ch1">
                        <label class="unis-checkbox-style" for="ch1"></label>
                        <span>Add to address book</span>
                    </div>
                    <div class="unis-checkbox">
                        <input type="checkbox" name="1" id="ch1">
                        <label class="unis-checkbox-style" for="ch1"></label>
                        <span>Signature Required</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="unis-section" style="position:relative">
    <div class="position-re">
        <div class="modification">
            <div class="header">
                <div class="title">Third Party Account</div>
            </div>
            <div class="content">
                <div class="d-flex justify-content-between">
                    <div class="align-self-start col-6 bo-no">
                        <label>Third Party Account #</label>
                        <input class="unis-put" value="Account #">
                    </div>
                    <div class="align-self-end col-5 bo-no">
                        <label>Billing Zipcode</label>
                        <input class="unis-put" value="Zipcode">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="unis-section" style="position:relative">
    <div class="position-re">
        <div class="modification">
            <div class="header">
                <div class="d-flex">
                    <div class="p-2 bo-no">
                        <div class="title">Packaging</div>
                    </div>
                    <div class="ml-auto p-2 bo-no">
                        <div class="required-text">*Required Field</div>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="checkbox">
                    <div class="unis-checkbox">
                        <input type="checkbox" name="1" id="ch1">
                        <label class="unis-checkbox-style" for="ch1"></label>
                        <span>Signature Required</span>
                    </div>
                </div>
                <div class="d-flex justify-content-between">
                    <div class="align-self-start col-3 bo-no">
                        <label>Length</label>
                        <input class="unis-put" value="">
                    </div>
                    <div class="align-self-end col-3 bo-no">
                        <label>Width</label>
                        <input class="unis-put" value="">
                    </div>
                    <div class="align-self-center col-3 bo-no">
                        <label>Height</label>
                        <input class="unis-put" value="">
                    </div>
                    <div class="align-self-baseline col-2 bo-no">
                        <label>Weight*</label>
                        <div class="unis-functional-box">
                            <span></span>
                            <span>Lb</span>
                        </div>
                    </div>
                </div>
                <div class="dropdown">
                    <label>Content*</label>
                    <input class="unis-put" value="Content Description">
                </div>
            </div>
        </div>
    </div>
</div>
<div class="unis-section" style="position:relative">
    <div class="position-re">
        <div class="modification">
            <div class="header">
                <div class="title">Carrier</div>
            </div>
            <div class="content">
                <div class="d-flex justify-content-between">
                    <div class="align-self-start col-4 bo-no">
                        <label>Carrier</label>
                        <button class="unis-select">
                            <input type="button" value="Select">
                        </button>
                    </div>
                    <div class="align-self-baseline col-3 bo-no">
                        <label>Package Type</label>
                        <button class="unis-select">
                            <input type="button" value="Select">
                        </button>
                    </div>
                    <div class="align-self-baseline col-4 bo-no">
                        <label>Service</label>
                        <button class="unis-select">
                            <input type="button" value="Select">
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="unis-section" style="position:relative">
    <div class="position-re">
        <div class="modification">
            <div class="header">
                <div class="title">Payment</div>
            </div>
            <div class="content">
                <div class="dropdown">
                    <label>Choose Payment Method</label>
                    <button class="unis-select">
                        <input type="button" value="Funds $15.00 available (Default)">
                    </button>
                </div>
                <div class="unis-checkbox">
                    <input type="checkbox" name="1" id="ch1">
                    <label class="unis-checkbox-style" for="ch1"></label>
                    <span>Apply Unis credit $10.00 available</span>
                </div>
            </div>
            <div class="content">
                <div class="d-flex flex-row-reverse">
                    <div class="align-self-center p-2 bo-no">
                        <div class="charge">$0.00</div>
                    </div>
                    <div class="align-self-center p-2 bo-no">
                        <div class="charge-label">Total estimated charge</div>
                    </div>
                </div>
            </div>
            <div class="bottom_box">
                <button class="unis-btn unis-btn-primary">Accept Charges and Print</button>
            </div>
        </div>
    </div>
</div>
</div>
<script src="./js/beautify2.js" type="text/javascript"></script>
<script src="./js/beautify-css2.js" type="text/javascript"></script>
<script src="./js/beautify-html2.js" type="text/javascript"></script>
<script src="js/jquery.min.js"></script>
<script src="../js/highlight.min.js"></script>
<script type="text/javascript">
    Vue.config.debug = true;
    app = new Vue({
        el: "#app",

    });
</script>
<script>
    $(document).ready(function () {
        var navHeight = $("#navHeight").offset().top;
        var navFix = $("#nav-wrap");
        $(window).scroll(function () {
            if ($(this).scrollTop() > navHeight) {
                navFix.addClass("navAside");
            }
            else {
                navFix.removeClass("navAside");
            }
        })
    });
    $('.nav-wrap').navScroll({
        mobileDropdown: false,
        mobileBreakpoint: 0,
        scrollSpy: true
    });
</script>

<script>
    var opts = {
        'indent_size': 4,
        'indent_char': ' ',
        'max_char': 300,
        'brace_style': 'expand',
    }
    var source = document.getElementsByClassName('code');
    for (var i = 0; i < source.length; i++) {
        source[i].innerHTML = style_html(source[i].innerHTML, opts).replace(/</g, "&lt;");
    }

</script>
<script>
    hljs.initHighlightingOnLoad();
</script>
</body>
</html>
